
<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
	<link rel='stylesheet' id='casper-google-fonts-css'  href='https://fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&amp;ver=4.0.1' type='text/css' media='all' />
	
	<title>Photopea API</title>
	
			
	</head>

	<body>
<div id="page">
	<div id="header"> 
		<a href="../index.html" class="title">Photopea API</a> 
		<!--<p>Web-based image editor.</p>-->
		<a href="https://blog.photopea.com">Blog</a> |
		<a href="../learn/index.html">Learn</a> |
		<a href="../tuts/index.html">Tutorials</a> |
		<a class="curr" href="index.html">API</a> |
		<a href="https://www.facebook.com/photopea">Facebook</a> |
		<a href="https://www.twitter.com/photopeacom">Twitter</a> 
	</div>
	
	<div id="main" style="max-width:960px;">
		<div id="sidebar" style="width:20%;">
			<!--<h3>Topics</h3>-->
			<ul>
						<li class="lvl0"><a href="index.html">API Spec</a></li>
			<li class="lvl1"><a href="environment.html">Environment</a></li>
			<li class="lvl1"><a href="live.html">Live Messaging</a></li>
			<li class="lvl1"><a href="plugins.html">Plugins</a></li>
			<li class="lvl0"><a href="playground.html">Playground</a></li>
			<li class="lvl0 active"><a href="demo.html">Demo</a></li>
			<li class="lvl0"><a href="accounts.html">Accounts</a></li>
			</ul>
		</div>
		<div id="content" style="width:80%;">

			<div class="post">
						
		
			<style type="text/css">.image {
					display: inline-block;
					width:9em;
					height:9em;
					margin: 1em;
				}
				img {
					width:100%;
					height:80%;
				}
			</style>
		
		<script>
			var images = ["24Hours.psd", "G4.TIF", "Miranda_kerr.sketch", "alza.psd", "cballs.png", "crown.wmf", "editor.sketch", "educ.emf", "many_lrs.psd", "martian.sketch", "milk.sketch", "mountains.webp", "ocal,0,A5363A75-C861-4982-8EBF-E9B4CB263A72.psd", "ocal,0,DbvX4fKWsAEeBG3.psd", "ocal,0,F67F6084-91C1-4E5A-B31F-B3843FF97E3F.psd", "ocal,0,Koala.psd", "ocal,1,3B75BF93-6216-426C-9AB7-F445F1770EE3.psd", "ocal,1,3E02563D-15B2-4F5B-AD82-E21990B4CFA7.psd", "ocal,3,svg-pdf.psd", "paper.xcf", "pea.psd", "pea_logo.jpg", "pp_gold.psd", "pug.png", "raptor.png"];
		
			function go(e)
			{
				var html = "";
				var fmts = ["png","jpg","jpeg","webp"];
				for(var i=0; i<images.length; i++)
				{
					var editOBJ = {
						"files" : [
							"//www.photopea.com/api/img/" + images[i],
						],
						"server" : {
							"url" : "//www.photopea.com/api/saveImage.php",
							"formats" : [ images[i].split(".")[1] ]
						}
					}
					var suff = images[i].split(".").pop();
					
					var editURL = "//www.photopea.com#" + encodeURI(JSON.stringify(editOBJ));
					html += "<div class=\"image\">"
					html += "<a href=\"img/" + images[i] + "\">";
					if(fmts.indexOf(suff)!=-1) html += "<img src=\"img/" + images[i] + "\" />";
					else                       html += "<img src=\"missing.png\" />";
					html += "</a>";
					html += "<span>"+images[i]+"</span> <br />";
					html += "<a href=\"" + editURL + "\">Edit</a>";
					html += "</div>"
				}
				document.getElementById("imgcont").innerHTML = html;
				//updatePlayground();
				
				//window.addEventListener("hashchange", onHashChange, false);
				//onHashChange();
				
			}		
			document.body.onload = go;
		
		</script>
		
		
		<h1>Editing local images with Photopea</h1>
		<p>Click "Edit" to open an image in Photopea. Click "File" - "Save (to Server)" in Photopea to save it back.</p>
		<div id="imgcont"></div>			</div>
		</div>
	</div>
		
	<div id="disqus_thread"></div>
	<script>

	/**
	*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
	*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
	/*
	var disqus_config = function () {
	this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
	this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
	};
	*/
	(function() { // DON'T EDIT BELOW THIS LINE
	var d = document, s = d.createElement('script');
	s.src = '//photopeablog.disqus.com/embed.js';
	s.setAttribute('data-timestamp', +new Date());
	(d.head || d.body).appendChild(s);
	})();
	</script>
	 
</div>
	
</html>
